<template>
  <div class="container animate__animated animate__fadeIn">
    <div class="left">
      <div class="carousel-container">
        <a-carousel arrows>
          <div
            slot="prevArrow"
            class="custom-slick-arrow"
            style="left: 10px; z-index: 1"
          >
            <a-icon type="left-circle" />
          </div>
          <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
            <a-icon type="right-circle" />
          </div>
          <img v-if="bailmentDetail.pictures.length == 0" src="./svg/no-picture.svg" alt="" height="405px">
          <img
            v-for="item in bailmentDetail.pictures"
            :key="item"
            :src="item"
            alt=""
            height="405px"
          />
        </a-carousel>
      </div>
    </div>
    <div class="right">
      <h2>{{ bailmentDetail.title }}</h2>
      <div>
        宠物类型：<a-tag color="orange" v-if="bailmentDetail.petType == '猫'"> {{ bailmentDetail.petType }} </a-tag>
                <a-tag color="cyan" v-else-if="bailmentDetail.petType == '狗'"> {{ bailmentDetail.petType }} </a-tag>
                <a-tag color="purple" v-else-if="bailmentDetail.petType == '兔'"> {{ bailmentDetail.petType }} </a-tag>
                <a-tag v-else> {{ bailmentDetail.petType }} </a-tag>
      </div>
      <div>
        宠物性别：
        <a-tag color="blue" v-if="bailmentDetail.petSex == 1"> 雄性 </a-tag>
        <a-tag color="pink" v-else-if="bailmentDetail.petSex == 2">
          雌性
        </a-tag>
        <a-tag v-else> 未知性别 </a-tag>
      </div>
      <div>宠物年龄：<a-tag color="green"> {{ bailmentDetail.petMonth }}个月 </a-tag></div>
      <div>联系人：{{ bailmentDetail.linkman }}</div>
      <div>电话：{{ bailmentDetail.phone }}</div>
      <div>微信：{{ bailmentDetail.wechat }}</div>
      <div>地址：{{ bailmentDetail.address }}</div>
      <div>发布时间：{{ bailmentDetail.createTime }}</div>
      <div class="describe">
        <span
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          {{ bailmentDetail.description }}
        </span>
      </div>
      <!-- <div><button class="adopt-btn">我想领养</button></div> -->
    </div>
    <div id="spin" v-if="isLoading">
        <span>
          <a-spin size="large" tip="加载中..." />
        </span>
      </div>
  </div>
</template>

<script>
import requests from "./js/requests.js";
import { Carousel, Icon, Tag, Spin } from "ant-design-vue";

export default {
  name: "detail",
  components: { ACarousel: Carousel, AIcon: Icon, ATag: Tag, ASpin: Spin },
  data() {
    return {
      bailmentDetail: {pictures: []},
      isLoading: false,
    };
  },
  mounted() {
    this.isLoading = true;
    requests.getBailmentDetail(this.$route.query.id).then((res) => {
      if (res.code == 200) {
        this.bailmentDetail = res.data;
        this.isLoading = false;
      } else {
        this.$message.error(res.msg);
        this.isLoading = false;
      }
    });
  },
};
</script>

<style scoped>
#spin {
  width: 1440px;
  height: 500px;
  position: fixed;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: red; */
}

.carousel-container {
  width: 100%;
  margin-top: 80px;
  border-radius: 10px;
  /* background-color: #595c61; */
  overflow: hidden;
}

.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 405px;
  background: #c9c9c9;
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: rgb(107, 107, 107);
  /* background-color: rgba(31, 45, 61, 0.11); */
  opacity: 0.6;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.9;
}

.container {
  width: 1440px;
  height: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  /* background-color: antiquewhite; */
}

.left {
  width: 50%;
  height: 600px;
  /* background-color: brown; */
}

.right {
  width: 50%;
  height: 600px;
  padding-top: 50px;
  padding-left: 50px;
  /* background-color: rgb(212, 105, 105); */
}

.right h2 {
  width: 100%;
  height: 60px;
  overflow: hidden;
}

.right h2:hover {
  overflow-y: scroll;
}

.right h2::-webkit-scrollbar {
  width: 4px;
}

.right h2::-webkit-scrollbar-track {
  width: 4px;
  /* background-color: rgb(239, 239, 239); */
}

.right h2::-webkit-scrollbar-thumb {
  width: 4px;
  border-radius: 2px;
  background-color: rgb(188, 188, 188);
}

.right div {
  margin: 20px 0;
  font-size: 16px;
}

.right .describe {
  /* display: inline-block; */
  width: 600px;
  height: 100px;
  padding: 5px 10px;
  /* border: 1px solid rgb(207, 207, 207); */
  border-radius: 10px;
  overflow: hidden;
  background-color: rgb(237, 237, 237);
}

.right .describe:hover {
  /* padding-right: 6px; */
  overflow-y: scroll;
}

.right .describe span {
  display: inline-block;
  width: 580px;
}

.right .describe::-webkit-scrollbar {
  width: 4px;
}

.right .describe::-webkit-scrollbar-track {
  width: 4px;
  /* background-color: rgb(239, 239, 239); */
}

.right .describe::-webkit-scrollbar-thumb {
  width: 4px;
  border-radius: 2px;
  background-color: rgb(188, 188, 188);
}

.adopt-btn {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  color: rgb(255, 255, 255);
  background-color: #2293f0;
  transition: 0.3s;
}

.adopt-btn:hover {
  box-shadow: 0 5px 10px rgb(0, 0, 0, 0.5);
}
</style>